<template>
    <div>
        <el-row class="search">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-input v-model="input" placeholder="请输入商品名"></el-input>
                </div>
            </el-col>
            <el-col :span="2"><el-button @click="search" type="primary" icon="el-icon-search">搜索</el-button></el-col>
            <el-col :span="4" :offset="1">
                <el-select v-model="category" @change="changeselect" placeholder="一级分类">
                    <el-option v-for="it in ptcategory" :label="it.name" :key="it.id" :value="it.id"></el-option>
                </el-select>
            </el-col>
            <el-col :span="4">
                <el-select @change="goodcategory" v-model="categoryc" placeholder="二级分类">
                    <el-option v-for="it in categorylist" :key="it.id" :label="it.name" :value="it.id"></el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-table :data="tableData" stripe style="width: 100%">
            <el-table-column prop="number" label="商品编号"> </el-table-column>
            <el-table-column prop="name" label="商品名称"> </el-table-column>
            <el-table-column label="图片">
                <template slot-scope="scope"> <img :src="scope.row.photo" alt="" /> </template
            ></el-table-column>
            <el-table-column prop="cname" label="分类"></el-table-column>
            <el-table-column prop="price" label="价格"> </el-table-column>
            <el-table-column prop="stock" label="库存"> </el-table-column>
            <el-table-column class="describes" prop="describes" label="商品描述"> </el-table-column>
            <el-table-column prop="" label="操作">
                <template slot-scope="scope">
                    <el-button @click="modgoods(scope.row)" type="text" size="small"><i class="el-icon-edit"></i>修改</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" :page-size="pagesize" @current-change="handleCurrentChange">
        </el-pagination>
        <el-dialog title="修改商品信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="商品名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品价格" :label-width="formLabelWidth">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="商品库存" :label-width="formLabelWidth">
                    <el-input v-model="form.stock" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="cid" label="商品分类" :label-width="formLabelWidth">
                    <el-select @change="fchangeselect" v-model="fcategory" placeholder="请选择分类">
                        <el-option v-for="i in ptcategory" :key="i.id" :label="i.name" :value="i.id"></el-option>
                    </el-select>
                    <el-select v-model="form.cid" placeholder="请选择分类">
                        <el-option v-for="i in ccategorylist" :key="i.id" :label="i.name" :value="i.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品描述" class="parent" :label-width="formLabelWidth">
                    <div class="container">
                        <quill-editor
                            @change="onEditorChange"
                            ref="myTextEditor"
                            v-model="form.describes"
                            :options="editorOption"
                        ></quill-editor>
                    </div>
                </el-form-item>
                <el-form-item prop="photo" label="商品图片" :label-width="formLabelWidth">
                    <el-upload
                        :limit="6"
                        :on-exceed="overnum"
                        v-model="form.picture"
                        name="photo"
                        :action="url"
                        ref="upload"
                        :headers="token"
                        list-type="picture-card"
                        :auto-upload="true"
                        :multiple="true"
                        id="xxx"
                        :on-success="filesuccess"
                    >
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="modgoodsdetail">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import url from '../../assets/js/baseurl.js';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.snow.css';
import 'quill/dist/quill.bubble.css';
import { quillEditor } from 'vue-quill-editor';
export default {
    name: 'editor',
    data() {
        return {
            input: '',
            url: '',
            token: {},
            tableData: [],
            category: '',
            fcategory: '',
            ccategorylist: [],
            categoryc: '',
            categorylist: [],
            ptcategory: [],
            total: 0,
            pagesize: 2,
            currentPage: 1,
            cid: '',
            form: {
                name: '',
                price: '',
                describes: '',
                cid: '',
                stock: '',
                photo: []
            },
            goodsid:'',
            photo: { photoUrl: [] },
            formLabelWidth: '80px',
            dialogFormVisible: false,
            content: '',
            editorOption: {
                placeholder: 'Hello World'
            }
        };
    },
    components: {
        quillEditor
    },
    methods: {
        onEditorChange({ editor, html, text }) {
            this.form.describes = text;
        },
        filesuccess: function (res) {
            this.photo.photoUrl.push(res.photoUrl[0]);
        },
        overnum: function () {
            this.$message.error('只能上传六张图片');
        },
        handleCurrentChange: async function (row) {
            this.currentPage = row;
            let res = await this.$http.get(`${url.lxy}/admin/goods`, {
                params: { cid: this.cid, name: this.input, num: this.pagesize, page: this.currentPage }
            });
            this.tableData = res.data.data.lists;
            this.total = res.data.data.total;
            for (const it of res.data.data.lists) {
                it.photo = `${url.lxy}/${JSON.parse(it.photo.slice(1, it.photo.length - 1)).photoUrl[0]}`;
            }
        },
        modgoodsdetail: async function () {
            if (this.photo.photoUrl.length) {
                this.photo = `${JSON.stringify(this.photo)}`;
                this.form.photo = this.photo;
            }
            let res =await this.$http.put(`${url.lxy}/admin/goods/${this.goodsid}`,this.form)
            // console.log(res);
            // console.log(this.form);
            if(res.data.code){
                this.$message.success(res.data.msg)
            }else{
                this.$message.success(res.data.msg)
            }
            this.dialogFormVisible = false
        },
        modgoods: async function (row) {
            this.goodsid = row.id;
            let res = await this.$http.get(`${url.lxy}/admin/goods/${row.id}`);
            console.log(row.cid);
            let res1 = await this.$http.get(`${url.xiaoli}/list1/category`, { params: { zid: row.cid } });
            console.log(res1);
            let res2 = await this.$http.get(`${url.xiaoli}/list/category`, { params: { parent_id: res1.data.data.res.id } });
            this.ccategorylist = res2.data.data.lists;
            this.fcategory = res1.data.data.res.id;
            this.photo = { photoUrl: [] };
            this.dialogFormVisible = true;
            this.form.name = row.name;
            this.form.price = row.price;
            this.form.describes = row.describes;
            this.form.photo = res.data.data.photo.slice(1,res.data.data.photo.length-1);
            this.form.cid = row.cid;
            this.form.stock = row.stock;
            // console.log(this.form);
        },
        fchangeselect: async function (val) {
            let res = await this.$http.get(`${url.xiaoli}/list/category`, { params: { parent_id: val } });
            this.ccategorylist = res.data.data.lists;
        },
        changeselect: async function (val) {
            let res = await this.$http.get(`${url.xiaoli}/list/category`, { params: { parent_id: val } });
            this.categorylist = res.data.data.lists;
        },
        goodcategory: async function (val) {
            this.cid = val;
            let res = await this.$http.get(`${url.lxy}/admin/goods`, { params: { cid: val, num: this.pagesize, page: this.currentPage } });
            for (const it of res.data.data.lists) {
                it.photo = `${url.lxy}/${JSON.parse(it.photo.slice(1, it.photo.length - 1)).photoUrl[0]}`;
            }
            this.tableData = res.data.data.lists;
            this.total = res.data.data.total;
        },
        search: async function () {
            let res = await this.$http.get(`${url.lxy}/admin/goods`, {
                params: { name: this.input, num: this.pagesize, page: this.currentPage }
            });
            for (const it of res.data.data.lists) {
                it.photo = `${url.lxy}/${JSON.parse(it.photo.slice(1, it.photo.length - 1)).photoUrl[0]}`;
            }
            this.tableData = res.data.data.lists;
            this.total = res.data.data.total;
        }
    },
    mounted: async function () {
        let res = await this.$http.get(`${url.lxy}/admin/goods`, { params: { num: this.pagesize, page: this.currentPage } });
        this.tableData = res.data.data.lists;
        this.total = res.data.data.total;
        for (const it of res.data.data.lists) {
            it.photo = `${url.lxy}/${JSON.parse(it.photo.slice(1, it.photo.length - 1)).photoUrl[0]}`;
        }
        let res1 = await this.$http.get(`${url.xiaoli}/list/category`);
        this.ptcategory = res1.data.data.lists;
        this.token = { token: sessionStorage.getItem('access_token') };
        this.url = url.lxy + '/files';
        // console.log(this.ptcategory);
    }
};
</script>

<style  scoped>
.parent /deep/.ql-container.ql-snow {
    min-height: 150px !important;
}
.editor-btn {
    margin-top: 0px;
}
.container {
    padding: 0px;
}
.date {
    width: 100%;
}
img {
    width: 40px;
}
.search {
    margin-bottom: 10px;
}
.describes {
    width: 150px;
    white-space: nowrap; /*强制不换行*/
    overflow: hidden; /*超出部分隐藏*/
    text-overflow: ellipsis; /*文本超出部分省略号显示*/
}
</style>